<template>
   <div class="my_container">
      <!-- 已登录 -->
      <div class="header user_info" v-if="user">
         <div class="base_info">
            <div class="left">
               <!-- 左边头像 -->
               <van-image
                  class="avatar"
                  round
                  fit="cover"
                  :src="userInfo.photo"
               />
               <!-- 左边名字 -->
               <span class="name">{{ userInfo.name }}</span>
            </div>
            <div class="right">
               <van-button
                  size="mini"
                  round
                  to="/user/profile"
                  >编辑资料</van-button
               >
            </div>
         </div>
         <div class="data_stats">
            <div class="data_item">
               <span class="count">{{
                  userInfo.art_count
               }}</span>
               <span class="text">头条</span>
            </div>
            <div class="data_item">
               <span class="count">{{
                  userInfo.follow_count
               }}</span>
               <span class="text">关注</span>
            </div>
            <div class="data_item">
               <span class="count">{{
                  userInfo.fans_count
               }}</span>
               <span class="text">粉丝</span>
            </div>
            <div class="data_item">
               <span class="count">{{
                  userInfo.like_count
               }}</span>
               <span class="text">获赞</span>
            </div>
         </div>
      </div>
      <!-- 未登录头部 -->
      <div class="header not_login" v-else>
         <!-- 点击跳转到登录页 -->
         <div
            class="login_btn"
            @click="$router.push('/login')"
         >
            <img
               src="~@/assets/mobile.png"
               alt=""
               class="mobile_img"
            />
            <span class="text">登录 / 注册</span>
         </div>
      </div>

      <!-- 导航 -->
      <!-- 宫格组件的应用 -->
      <!-- :column-num="" 自定义列数 -->
      <!-- clickable 点击反馈作用 -->
      <van-grid :column-num="2" class="grid_nav" clickable>
         <van-grid-item class="grid_item">
            <i
               slot="icon"
               class="toutiao toutiao-shoucang"
            ></i>
            <span slot="text" class="text">收藏</span>
         </van-grid-item>
         <van-grid-item class="grid_item">
            <i
               slot="icon"
               class="toutiao toutiao-lishi"
            ></i>
            <span slot="text" class="text">历史</span>
         </van-grid-item>
      </van-grid>
      <van-cell title="消息通知" is-link />
      <van-cell title="小智同学" is-link />
      <!-- clickable 点击反馈 -->
      <!-- v-if="user"如果登陆了就显示 -->
      <van-cell
         v-if="user"
         class="logout-cell"
         title="退出登录"
         @click="onLogout"
         center
         clickable
      />
   </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user'
export default {
   name: 'MyIndex',
   data() {
      return {
         userInfo: {} // 用户信息
      }
   },
   created() {
      // 如果用户登录了，则请求加载用户数据
      if (this.user) {
         this.loadUserInfo()
      }
   },
   computed: {
      ...mapState(['user'])
   },
   methods: {
      onLogout() {
         // 退出提示
         // 组建中要使用 this.$dialog
         this.$dialog
            .confirm({
               title: '确认退出吗？'
            })
            .then(() => {
               // on confirm
               // console.log('确认会执行这里')
               // 确认退出：清除登录状态（容器中的user + 本地存储中的user）设置为 null
               this.$store.commit('setUser', null)
            })
            .catch(() => {
               // on cancel
               console.log('取消执行这里')
            })
      },
      async loadUserInfo() {
         try {
            const { data } = await getUserInfo()
            // console.log(data)
            this.userInfo = data.data
         } catch (err) {
            this.$toast('获取数据失败，请稍后重试')
         }
      }
   }
}
</script>

<style lang="less" scoped>
.my_container {
   .header {
      height: 361px;
      background: url('~@/assets/banner.png');
      // 缩放填充到整个盒子中
      background-size: cover;
   }
   .not_login {
      display: flex;
      justify-content: center;
      align-items: center;
      .login_btn {
         // 垂直排列
         flex-direction: column;
         display: flex;
         justify-content: center;
         align-items: center;
         .mobile_img {
            width: 132px;
            height: 132px;
            margin-bottom: 15px;
         }
         .text {
            font-size: 28px;
            color: #fff;
         }
      }
   }
   .user_info {
      .base_info {
         height: 231px;
         padding: 76px 32px 23px;
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
         .left {
            display: flex;
            align-items: center;
            .avatar {
               width: 132px;
               height: 132px;
               margin-right: 23px;
               border: 4px solid #fff;
            }
            .name {
               font-size: 30px;
               color: #fff;
            }
         }
      }
      .data_stats {
         // height: 130px;
         display: flex;
         .data_item {
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            flex: 1;
            color: #fff;
            .count {
               font-size: 36px;
            }
            .text {
               font-size: 23px;
            }
         }
      }
   }
   .grid_nav {
      .grid_item {
         height: 141px;
         i.toutiao {
            font-size: 45px;
         }
         .toutiao-shoucang {
            color: #eb5253;
         }
         .toutiao-lishi {
            color: #ff9d1d;
         }
         span.text {
            font-size: 28px;
         }
      }
   }
   .logout-cell {
      height: 100px;
      text-align: center;
      color: #eb5253;
      margin: 10px 0;
      font-size: 30px;
   }
}
</style>
